<template>

  <div class="brand-wrapper">
    <!--      查询表单 -->
<!--    <div class="search-form">-->
<!--      <el-form :inline="true" class="demo-form-inline" size="mini">-->
<!--        <el-form-item label="品牌名称">-->
<!--          <el-input placeholder="请输入品牌名称" v-model="searchParams.typeName"></el-input>-->
<!--        </el-form-item>-->

<!--        <el-form-item>-->
<!--          <el-button type="primary" @click="searchPage">查询</el-button>-->
<!--          <el-button type="warning" @click="resetForm">重置</el-button>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--    </div>-->
    <!--    操作功能 -->
    <div class="crud-box">
      <el-button type="primary" size="mini" icon="el-icon-edit" @click="dialogVisible=true,formData={},imageUrl=''">新建</el-button>
      <el-button type="danger" size="mini" icon="el-icon-delete" :disabled="batchIds.length<=0"
                 @click="showBatchDeleteDialog">删除
      </el-button>
    </div>



    <!--    表格数据-->
    <!--:tree-props="{children: 'children'
        row-key="id"
     树状结构 children-->
    <div class="data-box">
      <el-table
          :data="tableData"
          style="width: 100%"
          row-key="id"
          :tree-props="{children: 'children'}"
          @selection-change="selectChange">
        <el-table-column
            align="center"
            type="selection"
            width="55">
        </el-table-column>

        <el-table-column

            prop="typeName"
            label="分类名称"
        >
        </el-table-column>
        <el-table-column

            prop="id"
            label="ID"
        >
        </el-table-column>
        <el-table-column

            prop="categoryLevel"
            label="分类等级"
        >
          <template v-slot="obj">
            <el-tag v-if="obj.row.categoryLevel==1">一级分类</el-tag>
            <el-tag v-if="obj.row.categoryLevel==2" type="success">二级分类</el-tag>
            <el-tag v-if="obj.row.categoryLevel==3" type="info">三级分类</el-tag>
          </template>
        </el-table-column>
        <el-table-column

            label="操作">
          <template v-slot="hanjie">
            <el-button type="primary" size="mini" icon="el-icon-edit" @click="dialogVisible=true,formData.id=hanjie.row.id,findById(hanjie.row.id)"></el-button>
            <el-popconfirm
                confirm-button-text='确定'
                cancel-button-text='取消'
                icon="el-icon-info"
                icon-color="red"
                @confirm="deleteById"
                placement="top"
                title="是否要删除本条记录？"
            >
              <el-button slot="reference" type="danger" size="mini" @click="id=hanjie.row.id"
                         icon="el-icon-delete"></el-button>
            </el-popconfirm>
          </template>


        </el-table-column>
      </el-table>

    </div>

    <!--弹框-->
    <el-dialog
        title="新建分类"
        :visible.sync="dialogVisible"
        width="33%"
    >
      <el-form ref="form" label-width="80px" :model="formData" size="small">
        <el-form-item label="分类名称">
          <el-input v-model="formData.typeName"></el-input>
        </el-form-item>

        <!--分类等级  添加！！！！-->
        <el-form-item label="分类等级">
          <el-radio-group v-model="formData.categoryLevel"
                          @change="chooseLevel">
            <el-radio  :label="1" value="1">一级</el-radio>
            <el-radio  :label="2" value="2">二级</el-radio>
            <el-radio  :label="3" value="3">三级</el-radio>
          </el-radio-group>
        </el-form-item>

        <!--复选框  级联选择器-->
        <el-form-item label="选择父级" v-if="formData.categoryLevel!=1">

          <el-cascader
              :props="prop"
              v-model="selectIds"
              placeholder="请选择父级分类"
              :options="options"
          ></el-cascader>

        </el-form-item>

      </el-form>


      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" size="mini" @click="dialogVisible = false,addOrEdit()">确 定</el-button>
  </span>
    </el-dialog>
  </div>




</template>

<script>
import gd_type from "./index";

export  default  gd_type;
</script>

<!--src 引用css样式-->
<style src="./index.css"  lang="css"></style>

